<template>
	<xn-form-container
		title="详情"
		:width="drawerWidth"
		v-model:open="visible"
		:destroy-on-close="true"
		:bodyStyle="{ 'padding-top': '0px' }"
		:footer="null"
		@close="onClose"
	>
		<process-detail-state-img :state-code="recordData.stateCode" />
		<a-tabs v-model:activeKey="activeKey">
			<a-tab-pane key="flowForm" tab="表单">
				<snowy-form-build v-if="formType === 'DESIGN'" ref="formBuildRef" :value="jsonData" :config="formConfig" />
				<component
					v-else-if="formType === 'DEFINE'"
					:is="customFormsLayouts"
					:value="initiatorDataJson"
					:disabled="true"
				/>
				<div v-else>
					<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="流程表单类型不正确，请联系管理员重置流程。" />
				</div>
			</a-tab-pane>
			<a-tab-pane key="flowChart" tab="流程图">
				<flow-chart v-model="modelDesignData" />
			</a-tab-pane>
			<a-tab-pane key="flowTrunRecord" tab="流转记录">
				<timeline-form :commentList="commentList" />
			</a-tab-pane>
		</a-tabs>
	</xn-form-container>
</template>

<script setup name="myApplyDetail">
	import processApi from '@/api/flw/processApi'
	import userCenterApi from '@/api/sys/userCenterApi'
	import fileApi from '@/api/dev/fileApi'
	import { isEmpty } from 'lodash-es'
	import { nextTick } from 'vue'
	import { Empty } from 'ant-design-vue'
	import FlowChart from '@/components/XnWorkflow/chart/index.vue'
	import ProcessDetailStateImg from '../../process/processDetailStateImg.vue'
	import TimelineForm from '../../process/timelineForm.vue'
	import { loadComponent } from '@/components/XnWorkflow/customForm'
	import workFlowUtils from '@/components/XnWorkflow/nodes/utils'

	const visible = ref(false)
	const recordData = ref({})
	const activeKey = ref('flowForm')
	const formType = ref('DESIGN')
	const customFormsLayouts = ref()
	const formBuildRef = ref()
	const initiatorDataJson = ref()
	const jsonData = ref({})
	const modelDesignData = ref({})
	const commentList = ref([])
	// 自动获取宽度，默认获取浏览器的宽度的90%
	const drawerWidth = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) * 0.5
	const formConfig = ref({
		getUserDetail: (param) => {
			if (isEmpty(param)) {
				return Promise.resolve([])
			}
			const searchParam = {
				idList: param
			}
			return userCenterApi.userCenterGetUserListByIdList(searchParam).then((data) => {
				return Promise.resolve(data)
			})
		},
		getFileDetail: (param) => {
			if (isEmpty(param)) {
				return Promise.resolve([])
			}
			const searchParam = {
				urlList: param
			}
			return fileApi.fileGetFileListByUrlList(searchParam).then((data) => {
				return Promise.resolve(data)
			})
		},
		getOrgDetail: (param) => {
			if (isEmpty(param)) {
				return Promise.resolve([])
			}
			const searchParam = {
				idList: param
			}
			return userCenterApi.userCenterGetOrgListByIdList(searchParam).then((data) => {
				return Promise.resolve(data)
			})
		},
		getPositionDetail: (param) => {
			if (isEmpty(param)) {
				return Promise.resolve([])
			}
			const searchParam = {
				idList: param
			}
			return userCenterApi.userCenterGetPositionListByIdList(searchParam).then((data) => {
				return Promise.resolve(data)
			})
		},
		getRoleDetail: (param) => {
			if (isEmpty(param)) {
				return Promise.resolve([])
			}
			const searchParam = {
				idList: param
			}
			return userCenterApi.userCenterGetRoleListByIdList(searchParam).then((data) => {
				return Promise.resolve(data)
			})
		}
	})
	const onOpen = (id) => {
		visible.value = true
		// 获取详情
		const param = {
			id: id
		}
		processApi
			.processDetail(param)
			.then((data) => {
				recordData.value = data
				modelDesignData.value = workFlowUtils.coalesceDataListChildNode(
					JSON.parse(data.initiatorModelJson),
					data.commentList
				)
				commentList.value = data.commentList
				formType.value = data.formType
				// 判断表单类型
				if (data.formType === 'DESIGN') {
					jsonData.value = workFlowUtils.convFormComponentsDisabled(JSON.parse(data.initiatorFormJson))
					const formData = Object.values(JSON.parse(data.initiatorDataJson))[0]
					nextTick(() => {
						// 设置表单参数
						formBuildRef.value.setData(formData)
					})
				} else if (data.formType === 'DEFINE') {
					// 注意这里用全局配置的表单
					const formUrl = modelDesignData.value.properties.configInfo.processUserTaskFormUrl
					customFormsLayouts.value = loadComponent(formUrl)
					initiatorDataJson.value = JSON.parse(data.initiatorDataJson)
				}
			})
			.catch(() => {
				visible.value = false
			})
	}
	// 关闭抽屉
	const onClose = () => {
		recordData.value = {}
		activeKey.value = 'flowForm'
		visible.value = false
	}
	defineExpose({
		onOpen
	})
</script>
